<template>
  <div class="table">
    <el-alert
        :title="'数据一共  '+tableData.counts+'  条'"
        type="info"
        show-icon
        :closable='false'>
      </el-alert>
      <el-table
      :data="tableData.items"
      style="width: 100%">
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
      align="center"
        width="200"
        prop="title"
        label="文章标题">
        <template slot-scope="scope">
            {{scope.row.title}}
            <a @click.prevent="openVideo(scope.row.videoURL)" v-if="scope.row.videoURL" href="#" class="el-icon-film"></a>
          </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="visits"
        label="阅读数">
      </el-table-column>
      <el-table-column
      align="center"
        prop="username"
        label="录入人">
      </el-table-column>
      <el-table-column
      align="center"
      prop="createTime"
      label="录入时间">
        <template v-slot="{row}">
          {{row.createTime|parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="state"
        width="150"
        label="状态">
        <template v-slot="{row}">
          {{row.state===1?'启用':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column
      width="280px"
      align="center"
        prop="address"
        label="操作">
        <template  v-slot="{row}">
          <el-button type="text" @click="preview(row)">预览</el-button>
          <el-button type="text" @click="handleStatus(row)">{{row.state===0?'启用':'禁用'}}</el-button>
        <el-button type="text" :disabled="row.state===0" @click="handleUpdate(row)">修改</el-button>
        <el-button type="text" :disabled="row.state===0" @click="handleDelete(row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
     <div class="pagination">
    <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(formDate.page)"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="Number(formDate.Pagesize)"
      layout="prev, pager, next,sizes,jumper"
      :total="tableData.counts">
    </el-pagination>
     </div>
      <!--视频-->
      <el-dialog
      class="videodialog"
       v-if="videoDialog"
       :modal-append-to-body="false"
        :visible="videoDialog"
        width="45%"
        @close="videoDialog=false"
      >
        <div class="box">
            <video class="video" width="720px" height="420px" controls="controls"
              id="video"
              @pause="myFunction"
              @play="onPlay"
              autoplay >
              <source :src="videoURL" type="video/mp4">
            </video>
            <canvas id="canvas" :class="active"/>
          </div>
      </el-dialog>
      <!-- 预览 -->
      <el-dialog class="dialogArticle"
        title="预览文章"
        :visible.sync="dialogArticle"
        width="30%"
        @close="dialogArticle = false">
         <div class="title">
          <h2>{{Data.title}}</h2>
          <div>
            <span>{{Data.createTime|parseTimeByString}}</span>
            <span>{{Data.username}}</span>
            <span class="el-icon-view"></span>
            <span>{{Data.visits}}</span>
          </div>
        </div>
        <div class="content" v-html="Data.articleBody"></div>
      </el-dialog>
</div>
</template>

<script>
import QRCode from 'qrcode'
import { status } from '@/api/hmmm/constants.js'
import { changeState, remove } from '@/api/hmmm/articles.js'
export default {
  name: 'tables',
  props: {
    tableData: {
      type: [Array, Object],
      required: true
    },
    formDate: {
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      dialogArticle: false,
      videoDialog: false,
      videoURL: '',
      active: 'right', // 二维码控制
      Data: {}
    }
  },
  created () {

  },
  computed: {
    status () {
      return status
    }
  },
  methods: {

    onPlay () {
      this.active = 'right'
    },
    // 点击显示二维码画布弹层
    openVideo (url) {
      this.videoDialog = true
      this.videoURL = url
      if (!url) return this.$message.error('该用户暂未设置头像')
      // 弹层显示，异步，视图还未改变
      this.qrcodeDialog = true
      // 上一步为异步，等视图改变，所以加this.$nextTick
      this.$nextTick(() => {
        // 拿到dom
        const canvas = document.getElementById('canvas')

        QRCode.toCanvas(canvas, url, error => {
          if (error) return this.$message.error('生成失败')
        })
      })
    },
    // 暂停时
    myFunction () {
      this.active = 'center'
    },
    preview (row) {
      this.dialogArticle = true
      this.Data = row
    },
    // 删除
    async handleDelete (id) {
      this.$confirm('此操作将永久删除该用户，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(id)
          this.$message.success('已成功删除')
          await this.$emit('onState', this.tableData)
        } catch (error) {
          console.log(error)
        }
      })
    },
    handleSizeChange (val) {
      this.$emit('handleSChange', val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCChange', val)
    },
    // 编辑
    handleUpdate (row) {
      this.$emit('acticlesUpdate', row)
    },

    // 状态
    async handleStatus (row) {
      if (row.state === 0) {
        row.state = 1
        this.tit = '启用'
      } else {
        row.state = 0
        this.tit = '禁用'
      }
      const data = {
        id: row.id,
        state: row.state
      }
      await this.$confirm('已成功' + this.tit + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await changeState(data)
          this.$message.success('已成功' + this.tit)
          this.$emit('onState', this.tableData)
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
        this.$emit('onState', this.tableData)
      })
      data.id = ''
      data.state = null
    }
  }
}

</script>

<style scoped lang="scss">
.el-table{
  font-size: 16px;

 .el-button{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: initial;
}
}
.pagination{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.table{
  margin-top: 40px;
}
.el-icon-film{
color: blue;
font-size: 20px;
}
::v-deep .videodialog .el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;
    -webkit-box-shadow: initial !important;
    box-shadow: initial !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    background-color: initial !important;}
::v-deep .videodialog .el-dialog__header {
    background: initial !important;
    background: initial !important;
    background: initial !important;
    border-radius: 9px 9px 0 0;
}
::v-deep .box{
// width: 100% !important; height: 100% !important; z-index: -999 !important;
//  position:relative !important;
 .video{
  width:100% !important;
  // filter:brightness(0.5)!important
}
.center{
    z-index: 999 !important;
    width: 200px !important;
    height: 200px !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform: translate(-50%,-50%)
  }
  .right{
    z-index: 999 !important;
    width: 60px !important;
    height: 60px !important;
    position:absolute !important;
    top:60px !important;
    right:20px !important;
  }
}
.dialogArticle{
  .title{
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  h2 {
    padding: 0;
    margin: 0;
  }
  span{
    margin-left: 10px;
    margin-top: 10px;
  }
}
.content{
  background: #f5f5f5;
  padding: 10px;
}
}

</style>
